<template>
  <div class="app-container">
    <el-form ref="form" :model="forms" label-width="100px">
      <el-form-item label="病友圈标题">
        <el-input v-model="forms.contentTitle" style="width: 221px"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="success" round @click="onSubmits">搜 索</el-button>
    <el-button type="primary" round @click="onSubmitse">首 页</el-button>
    <el-button type="primary" @click="onSubmit">发布病友圈</el-button>

    <br>
    <el-button v-for="(tab, index) in tabs" :key="index" :label="tab.catalogueName" :name="tab.catalogueId"
               @click="handleClick(tab.catalogueId)">{{ tab.catalogueName }}
    </el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="标题" width="180">
        <template slot-scope="scope">
          <span v-html="scope.row.contentTitle" style="margin-left: 10px"></span>
        </template>
      </el-table-column>
      <el-table-column label="内容" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.picture" style="width: 100px;height: 100px;margin-left: 10px">
        </template>
      </el-table-column>
      <el-table-column label="创建人" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.creationTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="收藏数量" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.collect }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评论数量" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.review }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="handleEdit(scope.row.contentId)">查 看</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pageNum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog title="发布病友圈" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="contentData" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="contentData.contentTitle"></el-input>
        </el-form-item>
        <el-form-item label="科室">
          <el-select v-model="contentData.catalogueId" placeholder="请选择科室"
                     @change="onCatalogueChange(contentData.catalogueId)">
            <el-option v-for="intm in tabs" :label="intm.catalogueName" :key="intm.catalogueId"
                       :value="intm.catalogueId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="病状">
          <el-select v-model="contentData.diseaseId" placeholder="请选择病状">
            <el-option v-for="intm in diseaseList" :label="intm.diseaseName" :key="intm.diseaseId"
                       :value="intm.diseaseId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="contentData.content"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
            action="/dev-api/patients/content/upLoad"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="onSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

      </el-form>
      <el-button @click="dialogVisible = false, contentData = {}">取 消</el-button>
      <el-button type="primary" @click="he">确 定</el-button>
    </el-dialog>
    <el-dialog title="评论" :visible.sync="dialogVisiblesel" width="50%">
      <ul>
        <li v-for="te in comments" @click="recover()">名称: {{te.username}}
           评论内容:{{ te.reviewContent }}
           时间: {{te.creationTime}}
        </li>
      </ul>

      <el-button @click="recover()">评 论</el-button>
      <el-form v-if="is ===1" ref="form" :model="formData" label-width="80px">
        <span>
          <el-avatar :size="50" src="https://empty">
            <img :src="formData.avatar">
         </el-avatar>
          <h1>名称:{{ formData.username }}<br></h1>
        <el-form-item label="评 论">
            <el-input type="textarea" v-model="formData.reviewContent"></el-input>
        </el-form-item>

        </span>
        <el-button @click="is = 0,formData = {}" type="danger">取 消 回 复</el-button>
        <el-button type="primary" @click="sef()">发 布</el-button>
      </el-form>

    </el-dialog>

    <el-dialog title="查看详情" :visible.sync="dialogVisibles" width="50%">
      <el-form ref="form" :model="dataContent" label-width="80px">
        <el-form-item label="标题">
          <span>{{ dataContent.contentTitle }}</span>
        </el-form-item>
        <el-form-item label="内容">
          <span> {{ dataContent.content }}</span>
        </el-form-item>
        <el-form-item label="图片">
          <img :src="dataContent.picture" style="width: 100px;height: 100px;margin-left: 10px">
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ dataContent.creationTime }}</span>
        </el-form-item>
        <el-form-item label="收藏数量">
          <span>{{ dataContent.collect }}</span>
        </el-form-item>
        <el-form-item label="点赞数量">
          <span>{{ dataContent.review }}</span>
        </el-form-item>
      </el-form>
      <el-button v-if="s == null" type="success" @click="enshrines(dataContent.contentId)">收 藏</el-button>
      <el-button v-if="s != null" type="danger" @click="enshrines(dataContent.contentId)">取 消 收 藏</el-button>
      <el-button type="primary" @click="appraisal(dataContent.contentId)">评 论</el-button>
    </el-dialog>


  </div>
</template>

<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import <组件名称> from '<组件路径>'================================================================================

//主


import {
  contentAdd,
  contentById, contentEnshrineMiddleAdd,
  contentEnshrineMiddleData,
  contentList,
  departmentList,
  diseaseList,
  patients, reviewAdd, reviewList
} from "@/api/system/patients";
import {getInfo} from "@/api/login";
import Year from "@/components/Crontab/year.vue";

export default {

  //import引入的组件需要注入到对象中才能使用=================================================================================
  components: {},
  props: {},
  data() {
    //这里存放数据======================================================================================================
    return {
      comments: [],
      is: 0,
      formData: {},
      s: {},
      middleData: {},
      enshrine: {},
      forms: {},
      contentData: {},
      dataContent: {},
      user: {},
      dialogVisible: false,
      dialogVisiblesel: false,
      dialogVisibles: false,
      departmentTypeId: 0,
      activeName: 'first',
      tabs: [],
      diseaseList: [],
      tableData: [],
      total: 0,
      form: {
        pageNum: 1,
        pageSize: 5
      }
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合===========================================================================================================
  methods: {
    sef() {
      this.formData.userId = this.user.userId
      this.formData.username = this.user.nickName
      reviewAdd(this.formData).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.is = 0
          this.formData = {}
        }
      })
    },
    recover() {
      this.formData.username = this.user.nickName
      this.formData.avatar = this.user.avatar
      this.is = 1

    },
    appraisal(contentId) {
      this.dialogVisiblesel = true
      this.formData.contentId = contentId
      reviewList(this.formData.contentId).then(res => {
        this.comments = res.data
      })
    },
    enshrines(contentId) {
      this.enshrine.contentId = contentId
      this.enshrine.userId = this.user.userId
      this.enshrine.username = this.user.nickName
      contentEnshrineMiddleAdd(this.enshrine).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.dialogVisibles = false
          this.lists()
        }
      })
    },
    handleEdit(contentId) {
      this.dialogVisibles = true
      contentById(contentId).then(res => {
        this.dataContent = res.data
      })
      this.middleData.contentId = contentId
      this.middleData.userId = this.user.userId
      contentEnshrineMiddleData(this.middleData).then(res => {
        this.s = res.data
      })
    },
    onSubmitse() {
      this.form.contentTitle = ""
      this.lists()
    },
    handleSizeChange(res) {
      this.form.pageSize = res
      this.lists();
    },
    handleCurrentChange(res) {
      this.form.pageNum = res
      this.lists();
    },
    he() {
      this.contentData.username = this.user.nickName
      console.log(this.contentData)
      contentAdd(this.contentData).then(res => {
        setTimeout(() => {
          this.dialogVisible = false
          this.contentData = {}
          this.lists()
        }, 800)
      })
    },
    onSuccess(res) {
      this.contentData.picture = res.data
    },
    onCatalogueChange(catalogueId) {
      if (this.diseaseList != null) {
        this.diseaseList = []
      }
      diseaseList(catalogueId).then(res => {
        this.diseaseList = res.data
      })
    },
    onSubmit() {
      this.dialogVisible = true
    },
    handleClick(catalogueId) {
      this.form.catalogueId = catalogueId
      patients(this.form).then(res => {
        this.tableData = res.data
      })
    },
    onSubmits() {
      this.form.contentTitle = this.forms.contentTitle
      contentList(this.form).then(res => {
        this.total = res.data.total
        this.tableData = res.data.list
      })
    },
    list() {
      departmentList().then(res => {
        this.tabs = res.data;
      })
    },
    userList() {2
      getInfo().then(res => {
        this.user = res.data.user
      })
    },
    lists() {
      contentList(this.form).then(res => {
        this.total = res.data.total
        this.tableData = res.data.list
      })
    }
  },
  //生命周期 - 创建完成(可以访问当前this实例)
  created() {
    this.list()
    this.lists()
    this.userList()
  },
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  } //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>

</style>

